<template>
  <div>
    <div class="wrapper">
      <div class="container container-login">
        <a href="javascript:;" title="返回首页" class="logo">骡窝窝</a>
        <div class="signup-forms flip">
          <div class="login-box" id="_j_login_box">
            <div class="inner inner_v2 clearfix">
              <div class="inner_v2_left">
                <form id="_j_login_form" method="post">
                  <div class="form-field">
                    <input
                      name="username"
                      type="text"
                      placeholder="您的手机号"
                      autocomplete="off"
                      data-verification-name="帐号"
                      v-model="username"
                    />
                    <div class="err-tip"></div>
                  </div>
                  <div class="form-field">
                    <input
                      name="password"
                      type="password"
                      placeholder="您的密码"
                      autocomplete="off"
                      data-verification-name="密码"
                      class="verification[required,minSize[4],maxSize[50]]"
                      v-model="password"
                    />
                    <div class="err-tip"></div>
                  </div>
                  <div class="form-link">
                    <a href="javascript:;">忘记密码</a>
                  </div>
                  <div class="submit-btn">
                    <button id="_js_loginBtn" type="button" @click="Login">
                      登 录
                    </button>
                  </div>
                </form>
                <div class="connect">
                  <p class="hd">用合作网站账户直接登录</p>
                  <div class="bd">
                    <a href="javascript:;" class="weibo"><i></i>新浪微博</a>
                    <a href="javascript:;" class="qq"><i></i>QQ</a>
                    <a href="javascript:;" class="weixin"><i></i>微信</a>
                    <div class="clear"></div>
                  </div>
                </div>
              </div>
              <div class="inner_v2_right">
                <img src="../assets/images/qrcode.jpg" />
                <p>扫一扫<br />下载骡窝窝APP</p>
              </div>
            </div>
            <div class="bottom-link">
              还没有帐号?<a href="./regist.html">马上注册</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="fullscreen-bg"
      style="background-image: url(../assets/images/34.jpg)"
    >
      <img
        src="../assets/images/34.jpg"
        style="width: auto; height: 657px; margin-top: -213px"
      />
    </div>
  </div>
</template>
<script>
import { LoginAPI } from "@/request/api";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      username: "13700000038",
      password: "1234",
    };
  },
  methods: {
    ...mapMutations({
      changeUserInfo: "userInfo/changeUserInfo",
    }),
    async Login() {
      let res = await LoginAPI({
        username: this.username,
        password: this.password,
      });
      if (res.code === 200) {
        localStorage.setItem("token", res.data.token);
        this.changeUserInfo(res.data.user);
        alert("登录成功");
        this.$router.push("/");
      }
    },
  },
};
</script>

<style lang="less" scoped>
a {
  color: #ffa800;
  text-decoration: none;
}

.clear {
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.fullscreen-bg {
  background-position: 50% 50%;
  background-size: cover;
  bottom: 0;
  right: 0;
  position: fixed;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
  top: 0;
}

.fullscreen-bg:before {
  background: url(../assets/images/full_page_vignette.png) 0 0
    rgba(0, 0, 0, 0.2);
  background-size: 100%;
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0.5;
  position: fixed;
  right: 0;
  top: 0;
}

.fullscreen-bg:after {
  bottom: 0;
  content: "";
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.fullscreen-bg img {
  display: none;
  display: block;
  -ms-interpolation-mode: bicubic;
  filter: progid:DXImageTransform.Microsoft.Fade(duration=0.3);
  height: auto;
  margin: 0;
  visibility: visible;
  opacity: 1;
}

.wrapper {
  width: 980px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -245px 0 0 -490px;
  z-index: 2;
  color: #666;
}

.container {
  width: 370px;
  margin: -30px auto 0;
}

.container-login {
  width: 600px;
  margin: -30px auto 0;
}

.container a.logo {
  width: 136px;
  height: 69px;
  display: block;
  text-indent: -999px;
  overflow: hidden;
  background: url(../assets/images/mfw-logo-white4.png) no-repeat;
  margin: 0 auto;
}
.signup-forms {
  position: relative;
}

.signup-forms.flip .login-box {
  z-index: 10;
  display: block;
}

.signup-forms .login-box {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  display: none;
}

.signup-forms .inner {
  width: 370px;
  padding-top: 26px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
}

.signup-forms .inner_v2 {
  width: 600px;
}

.bottom-link {
  width: 140px;
  margin: 10px auto;
  background-color: #000;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 12px;
  color: #fff;
  padding: 4px 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.bottom-link a {
  color: #ffa800;
  margin-left: 6px;
}

.signup-forms .inner_v2 .inner_v2_left {
  float: left;
  width: 370px;
}

.signup-forms .inner_v2 .inner_v2_right {
  float: right;
  border-left: 1px solid #ebebeb;
  width: 208px;
  padding-left: 20px;
  height: 300px;
  padding-top: 20px;
}

.signup-forms .connect {
  clear: both;
  overflow: hidden;
  margin-top: 30px;
}

.signup-forms .connect .hd {
  padding: 15px 0 20px 24px;
  font-size: 12px;
  color: #999;
  border-top: 1px solid #ebebeb;
}

.signup-forms .connect .bd {
  padding: 0 0 0 25px;
  width: 348px;
  height: 84px;
  overflow: hidden;
}

.signup-forms .connect a {
  width: 58px;
  height: 84px;
  text-align: center;
  font-size: 12px;
  color: #999;
  display: inline-block;
  margin-right: 25px;
}

.signup-forms .connect a i {
  width: 42px;
  height: 42px;
  background: url(../assets/images/c_icon3.gif) no-repeat;
  display: block;
  margin: 0 0 4px 10px;
  cursor: pointer;
}

.signup-forms .connect a.weibo i {
  background-position: 0 0;
}

.signup-forms .connect a.qq i {
  background-position: -42px 0;
}

.signup-forms .connect a.weixin i {
  background-position: -294px 0;
}

.signup-forms .form-field {
  clear: both;
  width: 320px;
  margin: 0 auto;
  padding-top: 10px;
  zoom: 1 \9;
}

.signup-forms .form-link {
  clear: both;
  width: 320px;
  margin: 0 auto;
  padding: 8px 0 0;
  text-align: right;
}

.signup-forms .submit-btn {
  width: 320px;
  margin: 0 auto;
  padding: 12px 0 0;
}

.signup-forms .form-field input {
  width: 306px;
  height: 28px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  line-height: 28px;
  padding: 6px 0 6px 12px;
  box-shadow: 0 0 5px #fff;
  outline: 0;
  transition: box-shadow 0.25s linear 0s;
  -webkit-transition: box-shadow 0.25s linear 0s;
}

.signup-forms .err-tip {
  clear: both;
  background: url("../assets/images/icon-guide.png") 0 -60px no-repeat #fff;
  padding: 0 0 3px 22px;
  width: 300px;
  font-size: 12px;
  color: #ff3c00;
  margin-top: 10px;
  top: 0;
  position: absolute;
  text-align: left;
  display: none;
}

.signup-forms .form-link a {
  color: #ffa800;
}

.signup-forms .submit-btn button {
  width: 320px;
  height: 42px;
  border: 0;
  background-color: #ffa800;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}

.signup-forms .inner_v2 .inner_v2_right img {
  width: 180px;
  height: 180px;
}

.signup-forms .inner_v2 .inner_v2_right p {
  font-size: 15px;
  color: #797979;
  line-height: 24px;
  margin-top: 20px;
  text-align: center;
  width: 180px;
}
</style>